<template>
  <van-overlay :show="show" z-index="100">
    <div
      class="box-border w-full h-full grid place-items-center"
      @click.stop="closeDialog"
    >
      <div
        class="box-border w-260px min-h-144px pb-55px h-auto bg-#FFFFFF rounded-4px p-16px relative"
      >
        <slot name="content">
          <h3
            class="text-16px text-#1E2226 font-400 leading-18px m-0 mt-36px text-center"
          >
            {{ message }}
          </h3>
        </slot>
        <div
          class="flex items-center justify-between gap-8px absolute bottom-16px"
        >
          <van-button
            class="box-border w-110px !h-38px"
            plain
            type="primary"
            @click.stop="cancel"
          >
            {{ cancelName }}
          </van-button>
          <van-button
            class="box-border w-110px !h-38px"
            type="primary"
            @click.stop="confirm"
          >
            {{ confirmName }}
          </van-button>
        </div>
      </div>
    </div>
  </van-overlay>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  show: {
    type: Boolean,
    required: true
  },
  isModelClose: {
    type: Boolean,
    default: false
  },
  message: {
    type: String,
    default: '是否执行该操作？'
  },
  cancelName: {
    type: String,
    default: '取消'
  },
  confirmName: {
    type: String,
    default: '确定'
  }
})

const emit = defineEmits(['update:show', 'cancel', 'confirm'])

const closeDialog = () => {
  if (props.isModelClose) {
    emit('update:show', false)
  }
}

const cancel = () => {
  emit('update:show', false)
  emit('cancel')
}

const confirm = () => {
  emit('confirm')
}
</script>

<style scoped>
/* 你可以在这里添加一些特定的样式 */
</style>
